<template>
    <div v-wechat-title="$route.meta.title">
        <div class="PartContent">
            <div class="item">
                <div class="item-left">
                    <img class="item-left__img" :src="img" alt="">
                </div>
                <div class="item-center">
                    <div class="item-center__name"> 
                        <svg class="icon cell_icon" aria-hidden="true" style="width:.5rem;height:.5rem;vertical-align: -.15rem">
                            <use xlink:href="#icon-xingbienan"></use>
                        </svg>
                        <span style="font-size: .36rem">{{name}}</span>
                    </div>
                    <div class="item-center__address">
                        <svg class="icon cell_icon" aria-hidden="true" style="width:.5rem;height:.5rem;vertical-align: -.15rem">
                            <use xlink:href="#icon-dizhi"></use>
                        </svg>
                        <span style="font-size: .12rem">广东省 江门市 蓬江区</span>

                    </div>
                </div>
                <div class="item-right">
                    <div class="item-right__icon">
                        <flexbox :gutter="0">
                            <flexbox-item>
                                <div class="header-right__flex">
                                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.3rem;height:.3rem;vertical-align:-0.08rem">
                                        <use :xlink:href="this.weixin === 1?'#icon-z-weixin2-copy-copy':'#icon-z-weixin2-copy'"></use>
                                    </svg>
                                    
                                </div>
                            </flexbox-item>
                            <flexbox-item>
                                <div class="header-right__flex">
                                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.3rem;height:.3rem;vertical-align:-0.08rem">
                                        <use :xlink:href="this.weixin === 1?'#icon-shouji-copy':'#icon-shouji'"></use>
                                    </svg>
                                    
                                </div>
                            </flexbox-item>
                            <flexbox-item>
                                <div class="header-right__flex">
                                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.3rem;height:.3rem;vertical-align:-0.08rem">
                                        <use :xlink:href="this.realname === 1?'#icon-shimingrenzheng-copy':'#icon-shimingrenzheng'"></use>
                                    </svg>
                                    
                                </div>
                            </flexbox-item>
                            <flexbox-item>
                                <div class="header-right__flex">
                                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.3rem;height:.3rem;vertical-align:-0.08rem">
                                        <use :xlink:href="this.email === 1?'#icon-youjianxinjian-copy':'#icon-youjianxinjian'"></use>
                                    </svg>  
                                </div>
                            </flexbox-item>
                            <flexbox-item>
                                <div class="header-right__flex">
                                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.3rem;height:.3rem;vertical-align:-0.08rem">
                                        <use :xlink:href="this.vip === 1?'#icon-vip-copy':'#icon-vip'"></use>
                                    </svg>                               
                                </div>
                            </flexbox-item>
                        </flexbox>
                    </div>
                    <div class="item-right__button">
                        <span class="item-right__buttonCommon">私信</span>
                    </div>
                    
                </div>
            </div>
            
        </div>



    </div>
</template>

<script>
import { Flexbox, FlexboxItem } from 'vux'
export default {
    name: "Participant",
    components: {
        Flexbox,
        FlexboxItem
    },
    mounted () {
        document.querySelector('body').setAttribute('style', 'background:#fff;height:100%',)
    },
    beforeDestroy () {
        document.querySelector('body').setAttribute('style', '')
    },
    props: {
        img: {
            default () {
                return 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=747467622,4011869909&fm=58&bpow=460&bpoh=460'
            }
        },
        name: {
           default () {
                return '尤雨溪'
            } 
        },
        weixin: {
            default () {
                return 1
            }
        },
        phone: {
            default () {
                return 1
            }
        },
        realname: {
            default () {
                return 1
            }
        },
        email: {
            default () {
                return 1
            }
        },
        vip: {
            default () {
                return 0
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.PartContent
    .item
        overflow: hidden
        box-sizing: border-box
        padding: .3rem 0 .25rem .2rem
        border-bottom: 1px solid #ececec
        display: flex
        .item-left
            float: left
            margin-right: .05rem
            .item-left__img
                width: 1.3rem
                height: 1.3rem
                border-radius: 50%
        .item-center
            float: left 
            .item-center__name
                margin-bottom: .15rem
            .item-center__address
                // word-break:keep-all
                white-space:nowrap
                // overflow: hidden              
                // text-overflow: ellipsis
        .item-right
            flex: 1
            padding-left: .5rem
            .item-right__icon
                margin-bottom: .4rem
            .item-right__button
                box-sizing: border-box
                padding-left: .5rem
                .item-right__buttonCommon
                    width: .5rem
                    padding: .05rem .2rem
                    border: 1px solid #ffb565
                    color: #ffb565
                    




</style>

